﻿function HighlightElement(elementId, darkerClass, lighterClass, paddingTopBottom, paddingLeftRight) {
    this.Element = $('#' + elementId);
    this.DarkClass = darkerClass;
    this.HighlightClass = lighterClass;
    this.__padding = new Object();
    this.__padding.TB = paddingTopBottom;
    this.__padding.LR = paddingLeftRight;
    if (!this.__padding.TB) this.__padding.TB = 0;
    if (!this.__padding.LR) this.__padding.LR = 0;
    this.Build();
}

HighlightElement.prototype.Build = function () {
    var elOff = this.Element.offset();
    var w = Math.ceil(this.Element.outerWidth());
    var h = Math.ceil(this.Element.outerHeight());

    this.TopLeft = { X: elOff.left - this.__padding.LR, Y: elOff.top - this.__padding.TB };
    this.TopRight = { X: elOff.left + w + this.__padding.LR, Y: elOff.top - this.__padding.TB };
    this.BottomLeft = { X: elOff.left - this.__padding.LR, Y: elOff.top + h + this.__padding.TB };
    this.BottomRight = { X: elOff.left + w + this.__padding.LR, Y: elOff.top + h + this.__padding.TB };

    this.Elements = new Array();
    var elements = this.Elements;
    var idx = 110;
    var getDefEl = function (cssClass) {
        var element = $('<div />').addClass(cssClass).css({
            position: 'absolute',
            zIndex: (idx++)
        });
        element.prependTo($('body'));
        elements.push(element);
        return element;
    };

    getDefEl(this.DarkClass).css({
        top: '0px',
        left: '0px',
        width: '100%',
        height: this.TopLeft.Y + 'px'
    });
    getDefEl(this.DarkClass).css({
        top: this.TopLeft.Y + 'px',
        left: '0px',
        width: this.TopLeft.X + 'px',
        height: (this.BottomLeft.Y - this.TopLeft.Y) + 'px'
    });
    getDefEl(this.DarkClass).css({
        top: this.TopLeft.Y + 'px',
        left: this.TopRight.X + 'px',
        width: ($('body').width() - this.TopRight.X) + 'px',
        height: (this.BottomLeft.Y - this.TopLeft.Y) + 'px'
    });
    getDefEl(this.DarkClass).css({
        top: this.BottomLeft.Y + 'px',
        left: '0px',
        width: '100%',
        height: ($('body').height() - this.BottomLeft.Y) + 'px'
    });
    var eLight = getDefEl(this.HighlightClass);
    eLight.css({
        width: (this.TopRight.X - this.TopLeft.X) + 'px',
        height: (this.BottomLeft.Y - this.TopLeft.Y) + 'px'
    });
    var ofTB = (eLight.outerHeight() - eLight.height()) / 2;
    var ofLR = (eLight.outerWidth() - eLight.width()) / 2;
    eLight.css({
        top: (this.TopLeft.Y - ofTB) + 'px',
        left: (this.TopLeft.X - ofLR) + 'px'
    });

    var c = this;
    for (var xe = 0; xe < this.Elements.length; xe++) {
        this.Elements[xe].click(function () {
            for (var xe = 0; xe < c.Elements.length; xe++) {
                c.Elements[xe].remove();
            }
            $('#reservationHighlight').hide();
        });
    }
}

function ShowReservationHighlight() {
    var he = new HighlightElement('searchReservationContent', 'reservationDark', 'reservationLight', 10, 20);
    var $tht = $('#reservationHighlight');
    //var thtw = $(window).width() * 0.9;
    //if (thtw > 450)
    //    thtw = 450;
    //$tht.width(thtw);
    var top = 0;
    var left = 0;
    if (!$tht.data('org-top')) {
        top = parseInt($tht.css('top').replace('px', ''));
        if (!top)
            top = 0;
        $tht.data('org-top', top);
    } else
        top = $tht.data('org-top');

    if (!$tht.data('org-left')) {
        left = parseInt($tht.css('left').replace('px', ''));
        if (!left)
            left = 0;
        $tht.data('org-left', left);
    } else
        left = $tht.data('org-left');

    var sh = function () {
        $tht.fadeIn();
        var $rl = $('.reservationLight');
        var rlOff = $rl.offset();
        $tht.css({
            top: (rlOff.top - $tht.outerHeight() + top) + 'px',
            left: (he.TopLeft.X + (($rl.outerWidth() - $tht.outerWidth()) / 2) + left) + 'px'
        });
    };
    if ($(document).scrollTop() > 0) {
        $(window.opera ? 'html' : 'html, body').animate({
            scrollTop: 0
        }, 800, function () { sh(); });
    } else
        sh();
}
$(function () {
    $('a.checkAvability').css('cursor', 'pointer').click(function (e) {
        e.stopPropagation();
        ShowReservationHighlight();
    });
});